<template>
 
    <view class="content">
 
        <view class="detail_img">
 
            <view class="bottom"></view>
 
            <view class='dmGroup' v-for="(item, index) in unlimitedLogList" :key="index"
 
                :style="{ top: item.top + '%', animationName: 'dmAnimation', animationDuration: item.time + 's', animationTimingFunction: 'linear', animationDelay: index * 3 + 's', animationIterationCount: 'infinite', animationPlayState: 'running' }">
 
                <view class='dmItem'>
 
                    <view  @click="dmContent(item)" class='dm'>
 
                        <!-- <view class='avatarBox'>
 
                            <image :src="item.avatar || ''"
 
                                class='avatar' mode='aspectFit'></image>
 
                        </view> -->
 
                        {{ item.userNickname }}
 
                    </view>
 
                </view>
 
            </view>
 
        </view>
 
    </view>
 
</template>
 
 
 
<script setup lang="ts">
interface IProps {
    showContent: string
} withDefaults(defineProps<IProps>(), {})
const emit = defineEmits(['update:showContent'])
const dmContent = (item:any)=>{
    emit('update:showContent',item.userNickname)
 }
 const unlimitedLogList = ref([
    {
        userNickname:"我今年能发财吗？"  
    },
    {
        userNickname:"Ta还爱我吗？"  
    },
    {
        userNickname:"是我想的那样吗？"  
    },
    {
        userNickname:"我和Ta有结果吗？"  
    },
    {
        userNickname:"两年内能脱单吗？"  
    },
    {
        userNickname:"我能考过考核测试吗？"  
    },
    {
        userNickname:"桃花运什么时候来？"  
    },
 ])
 onMounted(()=>{
  unlimitedLogList.value = unlimitedLogList.value.map((item, i) => {
 
 const time = Math.floor(Math.random() * 20);

 const second = Math.floor(Math.random() * 100);

 const _time = time < 10 ? 10 + i : time + i;

 const top = Math.floor(Math.random() * 65) + 2;

 return {

   userNickname: item.userNickname,

   top,

   second,

   time: _time,

 }



})

 })
</script>
 
<style lang="scss" >
.content {
    position: absolute;
    z-index: 111;
    top: 50%;
    width: 100%;
    height: 320rpx;
}
 
.detail_img {
 
    width: 100%;
 
    position: relative;
 
    overflow: hidden;
 
    display: flex;
 
}
 
 
 
.bottom {
 
    width: 100%;
 
    height: 420rpx;
 
}
 
 
 
.dmGroup {
 
    position: absolute;
 
    top: 80rpx;
 
    left: 100%;
 
    z-index: 10;
 
    animation-timing-function: linear;
 
    animation-fill-mode: none;
 
    transform: translateZ(0);
 
    white-space: nowrap;
 
    height: 65rpx;
 
}
 
 
 
.dmItem {
 
    display: inline-flex;
 
    margin-right: 60rpx;
 
    white-space: nowrap;
 
}
 
 
 
.dmItem .dm {
 
    display: inline-flex;
 
    vertical-align: middle;
 
    align-items: center;
 
    position: relative;
 
    height: 65rpx;
 
    line-height: 50rpx;
 
    padding: 0 15rpx 0 15rpx;
 
    box-sizing: border-box;
 
    background: #F2AE58;
 
    border-radius: 45rpx;
 
    overflow: hidden;
 
    font-size: 28rpx;
 
    color: rgba(255, 255, 255, 1);
    // 不收缩
    white-space: nowrap;
 
}
 
 
 
.dmItem .avatarBox {
 
    display: inline-block;
 
    position: relative;
 
    width: 55rpx;
 
    height: 55rpx;
 
    margin-right: 10rpx;
 
}
 
 
 
.dmItem .avatarBox image {
 
    width: 55rpx;
 
    height: 55rpx;
 
}
 
 
 
.dmItem .avatarBox .avatar {
 
    width: 50rpx;
 
    height: 50rpx;
 
    border: 0;
 
    border-radius: 50%;
 
    overflow: hidden;
 
}
 
 
 
.dmItem .dm .content {
 
    display: inline-block;
 
    max-width: 500rpx;
 
    height: 50rpx;
 
    line-height: 50rpx;
 
    margin-right: 10rpx;
 
    white-space: nowrap;
 
    text-overflow: ellipsis;
 
    overflow: hidden;
 
}
 
 
 
@keyframes dmAnimation {
 
    from {
 
        left: 100%;
 
    }
 
 
 
    to {
 
        left: -100%;
 
    }
 
}
 
</style>
